iT邦幫忙

2022 iThome 鐵人賽

DAY 27
0
自我挑戰組

做一個屬於自己的網頁系列 第 27

【DAY27 註冊系統之表單製作】

  • 分享至 

  • xImage
  •  

倒數4天啦!/images/emoticon/emoticon42.gif
最後這幾天會努力搞好一個登入註冊系統讓這個網頁比較完全的/images/emoticon/emoticon13.gif
那今天做出來的成果大致是如下:
https://i.imgur.com/jhvinzA.png
一個簡簡單單的form表單。

.html

<form action="./index.html" method="get">
            <table>
                <tr>
                    <td style="width: 100px;height:50px; text-align: center;">信箱:</td>
                    <td><input style="width:250px;height:50px;" type="email" name="email" id="email" placeholder="請輸入信箱"></td>
                </tr>

                <tr>
                    <td style="width: 100px;height:50px;text-align: center;">使用者名稱:</td>
                    <td><input style="width:250px;height:50px;" type="text" name="name" required="required" placeholder="請輸入使用者名稱"></td>
                </tr>

                <tr>
                    <td style="width: 100px;height:50px;text-align: center;">密碼:</td>
                    <td><input style="margin:0 auto; width:250px;height:50px;" type="password" id="pwd" required="required" placeholder="請輸入6-20位密碼,建議數字和字母組合"></td>
                </tr>

                <tr>
                    <td style="width: 100px;height:50px;text-align: center;">確認密碼:</td>
                    <td><input style="margin:0 auto; width:250px;height:50px;" type="password" id="pwd2" required="required" placeholder="再輸入一次密碼"></td>
                </tr>

                <tr>
                    <td colspan="2" style="height:50px;text-align: center;"><input name="tongyi" type="checkbox" required="required">我同意《使用者註冊協議》<br></td>
                </tr>

                <tr>
                    <td colspan="2" style="height:50px;text-align: center;"><input type="submit" value="註冊"></td>
                </tr>

            </table>
        </form>

form裡面的action是指之後提交出去後資料會到哪,那我們用action="./index.html"就是說之後資料會傳到這個網頁內,那因為我用的method是get,會直接顯示在網址。
https://ithelp.ithome.com.tw/upload/images/20221012/20151466CMecN15dyO.png
https://ithelp.ithome.com.tw/upload/images/20221012/20151466q2JaSEatSQ.png
可以看到剛剛輸入的資料都顯示在網址內了,超級沒隱私的啦/images/emoticon/emoticon25.gif
所以也可以改成post,就不會這麼暴露了!

placeholder : 輸入欄內的提示字。
required : 必填的話就可以加上。

type="password" : 是指密碼,在填寫的過程會幫你打馬賽克。一般字串用text。
type="checkbox" : 是指複選框,可以多個選項複選。
type="submit" : 就是提交,按下去後會把資料傳到你指定的地方。

以上是有用到的部分。下面也介紹一些~/images/emoticon/emoticon12.gif
type="radio" : 單選框,和check box不一樣是只能在多個選項裡選一個。
type="reset" : 按下去會幫你清空整個表單。

以上是我開賽的第二十七天,讓我們來期待第二十八天的到來吧!
加油、加油! 倒數3天。/images/emoticon/emoticon29.gif


上一篇
【DAY26 留言區.part3】
下一篇
【DAY28 註冊系統之表單美化】
系列文
做一個屬於自己的網頁30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言